<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>零件下单系统 - 登录</title>
    <link rel="stylesheet" href="../js/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            background-color: #1a73e8;
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            position: relative;
            overflow: hidden;
        }


        body::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                    linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
            background-size: 20px 20px;
            z-index: 0;
        }

        #app {
            position: relative;
            width: 400px;
            padding: 40px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
        }

        .header h1 {
            color: #333;
            font-size: 24px;
            margin-bottom: 5px;
        }

        .login-tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .login-tabs span {
            padding: 0 15px;
            color: #666;
            cursor: pointer;
        }

        .login-tabs span.active {
            color: #1a73e8;
            font-weight: bold;
        }

        .el-form-item__label {
            color: #666 !important;
        }

        .el-button {
            width: 100%;
            background-color: #1a73e8;
            border: none;
            padding: 12px;
            font-size: 16px;
        }

        .footer {
            margin-top: 20px;
            font-size: 12px;
            color: #999;
            text-align: center;
        }

        .footer a {
            color: #1a73e8;
            text-decoration: none;
        }

        .part-icon {
            position: absolute;
            opacity: 0.1;
            z-index: -1;
        }

        .gear-icon {
            top: 20px;
            right: 30px;
            font-size: 60px;
        }

        .screw-icon {
            bottom: 40px;
            left: 30px;
            font-size: 50px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="header">
        <h1>零件下单系统</h1>
    </div>

    <div class="login-tabs">
        <span class="active">密码登录</span>
    </div>

    <el-form :model="user" :rules="rules" ref="user" label-width="80px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
            <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="passwordHash">
            <el-input v-model="user.passwordHash" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
    </el-form>

    <div class="part-icon gear-icon">⚙️</div>
    <div class="part-icon screw-icon">🔩</div>
</div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/element-ui/lib/index.js"></script>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                user: {
                    username: '',
                    passwordHash: ''
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    passwordHash: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            login() {
                axios({
                    method:'post',
                    url: '/user/login',
                    data: this.user
                }).then(resp => {
                    if (resp.data.data ) {
                        window.location.href = "index.html";
                    }else {
                        this.$message.error("密码错误");
                    }
                })
            }
        }
    })
</script>
</html>